<template>
    <div class="comments">
     <header>
         <van-col span="2">
            <van-nav-bar left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="2" offset="2" style="margin-top: 6px;">
                <van-image round width="2rem" height="2rem" :src="user_icon" />
        </van-col>
        <van-col span="8" offset="1" style="margin-top: -5px;">
                <p class="author">{{user_name}}</p>
        </van-col>  
        <van-col span="4"  @click="guanzhu"  style="margin-top: 8px;">
                <van-button  round icon="plus"  size="mini" type="info" v-if="isGuan==0">关注</van-button>
                <van-button round icon="plus"   size="mini" color="#9e9e9e" v-if="isGuan==1">已关注</van-button>
        </van-col>   
        <van-col span="1" offset="2"   style="margin-top: 8px;">
            <div @click="showPopup"><van-icon name="ellipsis"  size="30"/></div>
            <van-popup  v-model="show" round position="bottom" :style="{ height: '30%' }">
                <div class="show">
                  <img src="@/assets/iconfont/icon-qq.png" alt="">
                  <p>QQ</p>
                </div>
               <div class="show">
                  <img src="@/assets/iconfont/icon-kj.png" alt="">
                  <p>QQ空间</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-wx.png" alt="">
                  <p>微信好友</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-pyq.png" alt="">
                  <p>朋友圈</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-wb.png" alt="">
                  <p>微博</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-p.png" alt="">
                  <p>站内好友</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-sc.png" alt="">
                  <p>收藏</p>
                </div>
                 <div class="show">
                  <img src="@/assets/iconfont/icon-pb.png" alt="">
                  <p>屏蔽该话题</p>
                </div>
                <div class="show">
                  <img src="@/assets/iconfont/icon-jb.png" alt="">
                  <p>举报</p>
                </div>
            </van-popup>    
        </van-col>
        <!-- 分割线 -->
        <van-col span="24"  style=" border-top: 2px solid lightgray;"/>
    </header>
        <!--评论内容  -->
        <van-col span="6" offset="1">
            <div class="nav">
              <h4>评论</h4>
              <div>
                  <p>插眼</p> 
              </div>     
            </div>                       
        </van-col>
        <van-col span="24"  style=" border-top: 1px solid lightgray;"/>
        <van-col span="24" offset="1">
            <div class="content" v-for="item in comments" :key="item.num">
               <van-col span="2" style="margin-top: 10px;">
                    <van-image round width="2rem" height="2rem" :src="item.icon" />
              </van-col>
              <van-col span="20" offset="1">
                <p>{{item.name}} <span>{{item.create_time}}</span></p>
                <span class="number">{{item.num}}</span>
                <div @click="zan">
                    <van-image v-if="isClick==0" class="img1" round width="1rem" height="1rem" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/a11c89e5-716d-408f-beb9-480ad27669e0.png" />
                    <van-image v-if="isClick==1" class="img1" round width="1rem" height="1rem" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/4ddbf869-6b57-4cbf-879f-a4ebccf3bc52.png" />
                </div>                
                <van-image @click="cai" class="img2" round width="1rem" height="1rem" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/6be0ec84-8de4-49b8-9950-3637d5182b05.png" />
                <p>{{item.content}}</p>
                <van-button round size="mini">回复</van-button>
             </van-col>
            </div>                       
        </van-col>  

          <!--评论框-->
           <van-col span="24" class="ipt">
            <van-col span="20">
              <van-field v-model="text" class="pl"   placeholder="请发表你的评论"/>
            </van-col>  
              <van-button type="info" @click="add" size="small">发送</van-button>
          </van-col>  
    </div>
</template>
<script>
import { Toast } from 'vant';
import axios from "axios";
export default {
    data() {
        return {
             show: false,
             num:2,
             isClick:'',
             comments:[],
             text:'',
             user_icon:'',
             user_name:'',
             follered_id:'',
             isGuan:''
        }
    },
  methods: {
    onClickLeft() {
      history.back();
    },
    showPopup() {
      this.show = true;
    },
    zan(e){
        if(this.isClick==0){
            this.isClick=1
            console.log(e);
            this.num=this.num+1
        }else{
            this.isClick=0
            this.num=this.num-1
        }
    },
    cai(){
     Toast('已踩,该评论会减少曝光');
    },
    add(){
      axios.get("http://localhost:3000/comments",{
        params:{
          content:this.text,
          user_id:localStorage.getItem('user_id')
        }
      })
      .then((res) => {
        location.reload()
        
      });
      this.text=''
    },
    guanzhu(){
       if(this.isGuan==0){
            this.isGuan=1
            Toast('关注成功');
             axios.get("http://localhost:3000/Guan",{
                params:{
                    foller_id:localStorage.getItem('user_id'),
                    follered_id:this.follered_id
                 }
              }).then((res) => {
                 console.log(res);
      })
        }else{
            this.isGuan=0
           Toast('取消关注');
        }
    }
  },
    created() {
    axios.get("http://localhost:3000/news_detail?id=" + this.$route.params.id)
      .then((res) => {
        console.log(res);
        var res=res.data.data
        this.comments = res.result;
        this.user_icon=res.result1[0].icon
        this.user_name=res.result1[0].name
        this.follered_id=res.result1[0].id
      });
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: black;
}

/deep/ .van-popup--bottom.van-popup--round{
    display: flex;
    flex-wrap: wrap;
    
}

.show{
  flex-direction: column;
  img{
      width: 50px;
      height: 50px;
      margin: 10px;
  }
  p{
   text-align: center;
    margin-top: 1px;
    font-size: 10px;
  }
}
.nav{
    display: flex;
    justify-content: space-between;
    width: 360px;
    h4,p{
    margin: 8px;
    }
    p{
        color: #00000070;
    }

}
.content{
    p:nth-child(1){
        font-size: 12px;
    }
    p:nth-child(2){
        font-size: 15px;
    }
    .number,.img1,.img2{
        float: right;
        margin-top: -35px;
    }
    .number{
        margin-right: 80px;
    }
    .img1{
        margin-right: 60px;
    }
    .img2{
        margin-right: 10px;
    }
}
.ipt{
      position: absolute;
      bottom: 0;
    .van-button--small{
      border-radius: 10px;
      margin-top: 4px;
    }
}
/deep/ .van-field__value{
  border:1px solid #9e9e9e;
  border-radius: 10px;
}

</style>